import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { DomItem } from "../@types";
import styles from '../index.less';

type Props = {
    item: DomItem;
    index: number;
};

export default observer(({ item, index }: Props) => {

    if (!item) {
        return null;
    }

    const { props } = item;
    const { text, fontSize, fontWeight, color } = props as any;
    return (
        <div key={`${item.id}-${index}`} className={styles.textItem} style={{
            display: 'flex',
            position: item.position,
            width: item.widthAdaptive ? '100%' : item.width,
            height: item.heightAdaptive ? '100%' : item.height,
            fontSize,
            fontWeight,
            color,
        }}>
            {text || item.name}
        </div>
    );
});
